<template>
    <div class="Search-Box">
        <div style="position:relative;z-index:5;padding:0 10px; background-color: #00bcd4;">

       
        <input v-model="keyword" type="text" name="" id="" placeholder="搜索城市">
        </div>
        <div class="keyword-box" ref="keywordBox" v-show="keyword">
            <ul>
                <li v-for="time in list" :key="time.id" @click="addCityClick(time.name)"> <a href="javascript:ovid(0)">{{time.name}}</a></li>
                <li v-show="!list.length">暂无数据</li>
            </ul>
        </div>

    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name:'CitySearch',
    props:['searchTies'],
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    watch:{
        keyword(){
            // 截流
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                const result = []


                // 便利传递的searchTies 取 key
                for(var i in this.searchTies){
                    this.searchTies[i].forEach((value) => {
                    // 判断是否等于input的value
                    if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
                        result.push(value)
                    }
                    })
                }
                this.list = result
            }, 100);


            //如果input内容等于空回到顶部修复 滑动之后再搜索
            if(this.keyword == ''){

                this.scroll.scrollTo(0, 0)

            }

        }
    },
    methods:{
        addCityClick(name){
            // console.log(name)

            this.$store.dispatch('changeCity',name)
            this.$router.push('/')

        }
    },
    mounted(){
        this.scroll = new BScroll(this.$refs.keywordBox) 
    }


}
</script>


<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl'
    .Search-Box
        background-color:$bgColor
        input
            line-height:28px
            width:100%
            border-radius:3px
            margin:5px 0 10px 0
            padding-left:15px
            box-sizing:border-box
        .keyword-box
            position:fixed
            top:88px
            left:0
            width:100%
            height:100%
            background-color:#f5f5f5
            li
                background-color:#fff
                border-bottom:1px solid #ddd
                color:#333
                line-height:45px
                padding-left:10px
</style>
